<template>
    <view class="buyerBox">   

        <swiper class="mySwiper" :indicator-dots="false" indicator-color="#fff" indicator-active-color="red" circular 
            @change='swiperChange' :vertical='true' :interval='interval' :autoplay='autoplay'> 
            <swiper-item v-for="item,idx in  infoList" :key='idx'>
               <view class="buyer-item" >
                    <view class="content">
                         <view class="img">
                            <image :src="$getImg(item.commentHeadImg,1)" mode="" />
                        </view>
                        <view class="desc">
                            <text>{{item.commentUserName}} 下单成功 {{ item.words}}</text>
                        </view>
                    </view>
                   
                </view>
            </swiper-item>
        </swiper>

        <!-- <view class="buyer-item" v-for="item.idx in infoList" :key="idx" :style="'margin-top':+scrollHeight+'rpx'">
            <view class="img">
                <image src="item.headImg" mode="" />
            </view>
            <view class="desc">
                <text>{{item.name}} 拼团成功，节省了XXXX元</text>
            </view>
        </view> -->
    </view>
</template>
<script>
const app = getApp();
export default {
    props: {
        text: {
            type: String,
            default: '暂无~~',
        }
    },
    data () {
        return {
            open: false,
            infoList:[],
            scrollHeight:0,
            interval:3000, //自动切换时间间隔
            autoplay:true,
            timer:undefined
        }
    },
    components: {},

    mounted (option) {

        // this.getBugList()

        // this.timer = setInterval(()=>{

        //     this.getBugList()

        // },60000)
    },
    methods: {

        //获取购买人流信息
        getBugList( cb ){
            this.$axios({ url: 'flash/supermarket/goods/comment/getRandom', data: 10 })
                .then(res => {

                        this.infoList = res.data.map(i =>{

                            i.words = Math.random() > 0.5 ? ',拼团成功' : ''

                            return i
                        })

                cb && cb()

            })
        },
        handleStart () {

            // const step = 50
            // var nums = 0
        
            // setInterval(()=>{
            //     if()

            // })

        },
        swiperChange(){

        }
    },
     beforeDestroy () {

        if( this.timer )
             clearInterval(this.timer)
    }
}
</script>
<style scoped lang="scss">
$heightSize: 50rpx;
.buyerBox{
    height: $heightSize;
    overflow: hidden;
}
.mySwiper{
    height: $heightSize;
      text-align: right;
}
.buyer-item {
    background: rgba(0, 0, 0, 0.3);
    height: $heightSize;
    border-radius: 30rpx;
    box-sizing: border-box;
    padding: 4rpx 18rpx 4rpx 4rpx;
    color: #fff;
    margin-top: 0px;
    transition: all .2s;
    display: inline-block;
  
    .content{
        display: flex;
        align-items: center;
        height: 100%;
    }
    .img{
        width: 42rpx;
        height: 100%;
        border-radius: 30rpx;
        margin-right: 14rpx;
        image{
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
        }
    }   
    .desc{
        max-width: 400rpx;
        overflow: hidden;
        color: #fff;
        font-size: 24rpx;
        white-space: nowrap;
    }
}

</style>